<!--
 * @Description: 
 * @Author: Aroma
 * @Date: 2024-11-15 16:27:40
 * @LastEditors: Aroma
 * @LastEditTime: 2024-11-15 17:36:49
 * @别瞎看: 你个无脑牛马
-->
<script setup>

</script>

<template>
  <div id="app">
    <!-- 左侧 -->
    <div class="divLeft">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    <!-- 中间 -->
    <div class="divCenter">
      <div class="divForm">
        <!-- 表单元素 -->
        <form action="#" method="post">
          <table>
            <tr>
              <td class="tdLeft">
                <label class="" for="username">
                  用户名
                </label>
              </td>
              <td class="tdRight">
                <input type="text" name="username" id="username" placeholder="请输入用户名">
              </td>
            </tr>
            <tr>
              <td class="tdLeft">
                <label class="" for="password">
                  密码
                </label>
              </td>
              <td class="tdRight">
                <input type="password" name="password" id="password" placeholder="请输入密码">
              </td>
            </tr>
            <tr>
              <td class="tdLeft">
                <label class="" for="gender">
                  性别
                </label>
              </td>
              <td class="tdRight">
                <input type="radio" name="gender" value="male" > 男
                <input type="radio" name="gender" value="female" > 女
              </td>
            </tr>
            <tr>
              <td class="tdLeft">
                <label class="" for="checkCode">
                  验证码
                </label>
              </td>
              <td class="tdRight">
                <input type="text" name="checkCode" id="checkCode" placeholder="请输入验证码">
                <img id="imgCode" src="./img/verify_code.jpg" alt="">
              </td>
            </tr>
            <tr>
              <td id="tdSubmit" colspan="2"><input id="btnSubmit" type="submit" value="注册"></td>
              <!-- <td></td> -->
            </tr>
          </table>
        </form>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="divRight">
      <p>已有账号？<a href="#">立即登录</a></p>
    </div>
  </div>
</template>

<style scoped>
    #app{
      opacity: 0.5;
      padding-top: 25px;
      background-image:url("./img/login_bg.png") ;
      background-repeat: no-repeat;
      background-position: center;
      /* border: 1px solid red; */
      width: 900px;
      height: 500px;
      /* border: 8px solid #eee; */
      border: 8px solid orange;
      /* 让div水平居中 */
      margin: auto;
      background-color: white;
    }
    .divLeft,.divCenter,.divRight{
      /* border: 1px solid red; */
    }
    .divLeft{
      float: left;
      width: 25%;
      padding-top: 15px;
      padding-left: 15px;
    }
    .divLeft>p:first-child{
      color: #ffd026;
      font-size: 20px;
    }
    .divLeft>p:last-child{
      color: #a6a6a6;
      font-size: 20px;
      /* font-weight: bold; */
    }
    .divCenter{
      padding-top: 100px;
      border:5px solid #ffd026;
      float: left;
      /* 这里减去的值是左右宽度 */
      width: calc(100% - 25% - 30%);
    }
    table{
      color: #a6a6a6;
    }
    .tdLeft{
      width: 100px;
      height: 45px;
      text-align: right;
      padding-right: 45px;
    }

    /* 单独设置验证码图片的样式 */
    #imgCode{
      height: 32px;
      /* 垂直居中 */
      vertical-align: middle;
    }
    /* 表单中放置提交按钮的td */
    #tdSubmit{
      text-align: center;
    }
    #btnSubmit{
      width: 115px;
      height: 30px;
      background-color: #ffd026;
      border: 0px ;
      color: #a6a6a6;
      border-radius: 5px;
    }
    #username,#password,#checkCode{
      width: 251px;
      height: 32px;
      border: 1px solid #a6a6a6;
      border-radius: 5px;
      padding-left: 10px;
    }
    #checkCode{
      width: 110px;
    }
    .divRight{
      float: right;
      width: 25%;
      padding-top: 15px;
      padding-right: 15px;
    }
    .divRight>p{
      font-size: 15px;
      color: #a6a6a6;
      text-align: right;
    }
    .divRight p a{
      color: pink;
    }
    tr{
      margin-top:100px ;
    }
</style>
